This creates the alternative hotels page. It is mostly a copy of the select hotel page, and most of the contents of the pages lives under the same component in /components.

Merged in feat/sw-397-alternative-hotels (pull request #1211)

Feat/sw 397 alternative hotels

* fix(SW-397): create alternative hotels page

* update types

* Adapt to new changes for fetching data

* Make bookingcode optional

* Code review fixes


Approved-by: Simon.Emanuelsson

app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/layout.module.css

@@ -0,0 +1,11 @@
+.layout {
+  min-height: 100dvh;
+  background-color: var(--Base-Background-Primary-Normal);
+  position: relative;
+}
+
+@media screen and (min-width: 768px) {
+  .layout {
+    z-index: 0;
+  }
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/layout.tsx

@@ -0,0 +1,7 @@
+import styles from "./layout.module.css"
+
+export default function HotelReservationLayout({
+  children,
+}: React.PropsWithChildren) {
+  return <div className={styles.layout}>{children}</div>
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/map/page.module.css

@@ -0,0 +1,6 @@
+.main {
+  display: grid;
+  background-color: var(--Scandic-Brand-Warm-White);
+  min-height: 100dvh;
+  position: relative;
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/map/page.tsx

@@ -0,0 +1,37 @@
+import { notFound } from "next/navigation"
+import { Suspense } from "react"
+
+import { SelectHotelMapContainer } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer"
+import { SelectHotelMapContainerSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton"
+import { MapContainer } from "@/components/MapContainer"
+import { setLang } from "@/i18n/serverContext"
+
+import { getHotelSearchDetails } from "../../utils"
+
+import styles from "./page.module.css"
+
+import type { AlternativeHotelsSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function SelectHotelMapPage({
+  params,
+  searchParams,
+}: PageArgs<LangParams, AlternativeHotelsSearchParams>) {
+  setLang(params.lang)
+
+  return (
+    <div className={styles.main}>
+      <MapContainer>
+        <Suspense
+          key={searchParams.hotel}
+          fallback={<SelectHotelMapContainerSkeleton />}
+        >
+          <SelectHotelMapContainer
+            searchParams={searchParams}
+            isAlternativeHotels
+          />
+        </Suspense>
+      </MapContainer>
+    </div>
+  )
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/page.tsx

@@ -0,0 +1,33 @@
+import { Suspense } from "react"
+
+import SelectHotel from "@/components/HotelReservation/SelectHotel"
+import { SelectHotelSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelSkeleton"
+import { setLang } from "@/i18n/serverContext"
+
+import type { AlternativeHotelsSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function AlternativeHotelsPage({
+  params,
+  searchParams,
+}: PageArgs<LangParams, AlternativeHotelsSearchParams>) {
+  setLang(params.lang)
+
+  const roomKey = Object.keys(searchParams)
+    .filter((key) => key.startsWith("room["))
+    .map((key) => searchParams[key])
+    .join("-")
+
+  return (
+    <Suspense
+      key={`${searchParams.hotel}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}`}
+      fallback={<SelectHotelSkeleton />}
+    >
+      <SelectHotel
+        params={params}
+        searchParams={searchParams}
+        isAlternativeHotels
+      />
+    </Suspense>
+  )
+}

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

@@ -3,7 +3,10 @@ import { serverClient } from "@/lib/trpc/server"
 
 import { getLang } from "@/i18n/serverContext"
 
-import type { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
+import type {
+  AlternativeHotelsAvailabilityInput,
+  AvailabilityInput,
+} from "@/types/components/hotelReservation/selectHotel/availabilityInput"
 import type {
   HotelData,
   NullableHotelData,
@@ -12,6 +15,7 @@ import type {
   CategorizedFilters,
   Filter,
 } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+import type { HotelsAvailabilityItem } from "@/server/routers/hotels/output"
 
 const hotelSurroundingsFilterNames = [
   "Hotel surroundings",
@@ -34,13 +38,41 @@ const hotelFacilitiesFilterNames = [
 export async function fetchAvailableHotels(
   input: AvailabilityInput
 ): Promise<NullableHotelData[]> {
-  const availableHotels = await serverClient().hotel.availability.hotels(input)
+  const availableHotels =
+    await serverClient().hotel.availability.hotelsByCity(input)
 
   if (!availableHotels) return []
 
+  return enhanceHotels(availableHotels)
+}
+
+export async function fetchAlternativeHotels(
+  hotelId: string,
+  input: AlternativeHotelsAvailabilityInput
+): Promise<NullableHotelData[]> {
+  const alternativeHotelIds = await serverClient().hotel.nearbyHotelIds({
+    hotelId,
+  })
+
+  if (!alternativeHotelIds) return []
+
+  const availableHotels =
+    await serverClient().hotel.availability.hotelsByHotelIds({
+      ...input,
+      hotelIds: alternativeHotelIds,
+    })
+
+  if (!availableHotels) return []
+
+  return enhanceHotels(availableHotels)
+}
+
+async function enhanceHotels(hotels: {
+  availability: HotelsAvailabilityItem[]
+}) {
   const language = getLang()
 
-  const hotels = availableHotels.availability.map(async (hotel) => {
+  const hotelFetchers = hotels.availability.map(async (hotel) => {
     const hotelData = await getHotelData({
       hotelId: hotel.hotelId.toString(),
       language,
@@ -54,7 +86,7 @@ export async function fetchAvailableHotels(
     }
   })
 
-  return await Promise.all(hotels)
+  return await Promise.all(hotelFetchers)
 }
 
 export function getFiltersFromHotels(hotels: HotelData[]): CategorizedFilters {

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

@@ -3,49 +3,81 @@ import { notFound } from "next/navigation"
 import { getLocations } from "@/lib/trpc/memoizedRequests"
 
 import { generateChildrenString } from "@/components/HotelReservation/utils"
-import { convertSearchParamsToObj } from "@/utils/url"
+import { convertSearchParamsToObj, type SelectHotelParams } from "@/utils/url"
 
-import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import type {
+  AlternativeHotelsSearchParams,
+  SelectHotelSearchParams,
+} from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type {
   Child,
   SelectRateSearchParams,
 } from "@/types/components/hotelReservation/selectRate/selectRate"
-import type { Location } from "@/types/trpc/routers/hotel/locations"
+import {
+  type HotelLocation,
+  isHotelLocation,
+  type Location,
+} from "@/types/trpc/routers/hotel/locations"
 
 interface HotelSearchDetails<T> {
   city: Location | null
-  hotel: Location | null
-  selectHotelParams: T
+  hotel: HotelLocation | null
+  selectHotelParams: SelectHotelParams<T> & { city: string | undefined }
   adultsInRoom: number
   childrenInRoomString?: string
   childrenInRoom?: Child[]
 }
 
 export async function getHotelSearchDetails<
-  T extends SelectHotelSearchParams | SelectRateSearchParams,
->({
-  searchParams,
-}: {
-  searchParams: T & {
-    [key: string]: string
-  }
-}): Promise<HotelSearchDetails<T> | null> {
+  T extends
+    | SelectHotelSearchParams
+    | SelectRateSearchParams
+    | AlternativeHotelsSearchParams,
+>(
+  {
+    searchParams,
+  }: {
+    searchParams: T & {
+      [key: string]: string
+    }
+  },
+  isAlternativeHotels?: boolean
+): Promise<HotelSearchDetails<T> | null> {
   const selectHotelParams = convertSearchParamsToObj<T>(searchParams)
 
   const locations = await getLocations()
 
   if (!locations || "error" in locations) return null
 
-  const city = locations.data.find(
-    (location) =>
-      location.name.toLowerCase() === selectHotelParams.city?.toLowerCase()
-  )
-  const hotel = locations.data.find(
-    (location) =>
-      "operaId" in location && location.operaId == selectHotelParams.hotelId
-  )
+  const hotel =
+    ("hotelId" in selectHotelParams &&
+      (locations.data.find(
+        (location) =>
+          isHotelLocation(location) &&
+          "operaId" in location &&
+          location.operaId === selectHotelParams.hotelId
+      ) as HotelLocation | undefined)) ||
+    null
+
+  if (isAlternativeHotels && !hotel) {
+    return notFound()
+  }
+
+  const cityName = isAlternativeHotels
+    ? hotel?.relationships.city.name
+    : "city" in selectHotelParams
+      ? (selectHotelParams.city as string | undefined)
+      : undefined
+
+  const city =
+    (typeof cityName === "string" &&
+      locations.data.find(
+        (location) => location.name.toLowerCase() === cityName.toLowerCase()
+      )) ||
+    null
 
   if (!city && !hotel) return notFound()
+  if (isAlternativeHotels && (!city || !hotel)) return notFound()
 
   let adultsInRoom = 1
   let childrenInRoomString: HotelSearchDetails<T>["childrenInRoomString"] =
@@ -63,9 +95,9 @@ export async function getHotelSearchDetails<
   }
 
   return {
-    city: city ?? null,
-    hotel: hotel ?? null,
-    selectHotelParams,
+    city,
+    hotel,
+    selectHotelParams: { city: cityName, ...selectHotelParams },
     adultsInRoom,
     childrenInRoomString,
     childrenInRoom,