Merge branch 'develop' into feat/performance-improvements

app/[lang]/(live)/(public)/hotelreservation/(standard)/@sidePeek/page.tsx

@@ -0,0 +1,25 @@
+import { getHotelData } from "@/lib/trpc/memoizedRequests"
+
+import { getQueryParamsForEnterDetails } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import SidePeek from "@/components/HotelReservation/SidePeek"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function HotelSidePeek({
+  params,
+  searchParams,
+}: PageArgs<LangParams, { hotel: string }>) {
+  const search = new URLSearchParams(searchParams)
+  const { hotel: hotelId } = getQueryParamsForEnterDetails(search)
+
+  if (!hotelId) {
+    return <SidePeek hotel={null} />
+  }
+
+  const hotel = await getHotelData({
+    hotelId: hotelId,
+    language: params.lang,
+  })
+
+  return <SidePeek hotel={hotel} />
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@sidePeek/page.tsx

@@ -1,24 +0,0 @@
-import { redirect } from "next/navigation"
-
-import { getHotelData } from "@/lib/trpc/memoizedRequests"
-
-import SidePeek from "@/components/HotelReservation/EnterDetails/SidePeek"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function HotelSidePeek({
-  params,
-  searchParams,
-}: PageArgs<LangParams, { hotel: string }>) {
-  if (!searchParams.hotel) {
-    redirect(`/${params.lang}`)
-  }
-  const hotel = await getHotelData({
-    hotelId: searchParams.hotel,
-    language: params.lang,
-  })
-  if (!hotel?.data) {
-    redirect(`/${params.lang}`)
-  }
-  return <SidePeek hotel={hotel.data.attributes} />
-}

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

@@ -0,0 +1,9 @@
+import {
+  getCreditCardsSafely,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"
+
+export function preload() {
+  void getProfileSafely()
+  void getCreditCardsSafely()
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.tsx

@@ -1,10 +1,12 @@
-import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
+import {
+  getCreditCardsSafely,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"
 
 import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
-import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
 import { setLang } from "@/i18n/serverContext"
 
-import { preload } from "./page"
+import { preload } from "./_preload"
 
 import styles from "./layout.module.css"
 
@@ -16,11 +18,9 @@ export default async function StepLayout({
   children,
   hotelHeader,
   params,
-  sidePeek,
 }: React.PropsWithChildren<
   LayoutArgs<LangParams & { step: StepEnum }> & {
     hotelHeader: React.ReactNode
-    sidePeek: React.ReactNode
     summary: React.ReactNode
   }
 >) {
@@ -34,7 +34,6 @@ export default async function StepLayout({
       <main className={styles.layout}>
         {hotelHeader}
         <div className={styles.content}>
-          <SelectedRoom />
           {children}
           <aside className={styles.summaryContainer}>
             <div className={styles.hider} />
@@ -42,7 +41,6 @@ export default async function StepLayout({
             <div className={styles.shadow} />
           </aside>
         </div>
-        {sidePeek}
       </main>
     </EnterDetailsProvider>
   )

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx

@@ -14,6 +14,7 @@ import Details from "@/components/HotelReservation/EnterDetails/Details"
 import HistoryStateManager from "@/components/HotelReservation/EnterDetails/HistoryStateManager"
 import Payment from "@/components/HotelReservation/EnterDetails/Payment"
 import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
+import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
 import {
   generateChildrenString,
   getQueryParamsForEnterDetails,
@@ -24,11 +25,6 @@ import { StepEnum } from "@/types/components/hotelReservation/enterDetails/step"
 import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { LangParams, PageArgs } from "@/types/params"
 
-export function preload() {
-  void getProfileSafely()
-  void getCreditCardsSafely()
-}
-
 function isValidStep(step: string): step is StepEnum {
   return Object.values(StepEnum).includes(step as StepEnum)
 }
@@ -104,6 +100,9 @@ export default async function StepPage({
   return (
     <section>
       <HistoryStateManager />
+
+      <SelectedRoom hotelId={hotelId} room={roomAvailability.selectedRoom} />
+
       {/* TODO: How to handle no beds found? */}
       {roomAvailability.bedTypes ? (
         <SectionAccordion

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

@@ -8,9 +8,17 @@ import { LangParams, LayoutArgs } from "@/types/params"
 
 export default function HotelReservationLayout({
   children,
-}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  sidePeek,
+}: React.PropsWithChildren<LayoutArgs<LangParams>> & {
+  sidePeek: React.ReactNode
+}) {
   if (env.HIDE_FOR_NEXT_RELEASE) {
     return notFound()
   }
-  return <div className={styles.layout}>{children}</div>
+  return (
+    <div className={styles.layout}>
+      {children}
+      {sidePeek}
+    </div>
+  )
 }

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

@@ -0,0 +1,75 @@
+import { notFound } from "next/navigation"
+
+import { env } from "@/env/server"
+import { getLocations } from "@/lib/trpc/memoizedRequests"
+
+import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
+import { getHotelReservationQueryParams } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import { MapModal } from "@/components/MapModal"
+import { setLang } from "@/i18n/serverContext"
+
+import {
+  fetchAvailableHotels,
+  generateChildrenString,
+  getCentralCoordinates,
+  getPointOfInterests,
+} from "../../utils"
+
+import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function SelectHotelMapPage({
+  params,
+  searchParams,
+}: PageArgs<LangParams, SelectHotelSearchParams>) {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return notFound()
+  }
+
+  setLang(params.lang)
+  const locations = await getLocations()
+
+  if (!locations || "error" in locations) {
+    return null
+  }
+  const city = locations.data.find(
+    (location) =>
+      location.name.toLowerCase() === searchParams.city.toLowerCase()
+  )
+  if (!city) return notFound()
+
+  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
+  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
+
+  const selectHotelParams = new URLSearchParams(searchParams)
+  const selectHotelParamsObject =
+    getHotelReservationQueryParams(selectHotelParams)
+  const adults = selectHotelParamsObject.room[0].adults // TODO: Handle multiple rooms
+  const children = selectHotelParamsObject.room[0].child
+    ? generateChildrenString(selectHotelParamsObject.room[0].child)
+    : undefined // TODO: Handle multiple rooms
+
+  const hotels = await fetchAvailableHotels({
+    cityId: city.id,
+    roomStayStartDate: searchParams.fromDate,
+    roomStayEndDate: searchParams.toDate,
+    adults,
+    children,
+  })
+
+  const pointOfInterests = getPointOfInterests(hotels)
+
+  const centralCoordinates = getCentralCoordinates(pointOfInterests)
+
+  return (
+    <MapModal>
+      <SelectHotelMap
+        apiKey={googleMapsApiKey}
+        coordinates={centralCoordinates}
+        pointsOfInterest={pointOfInterests}
+        mapId={googleMapId}
+        isModal={true}
+      />
+    </MapModal>
+  )
+}

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

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

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

@@ -0,0 +1,5 @@
+.layout {
+  min-height: 100dvh;
+  background-color: var(--Base-Background-Primary-Normal);
+  position: relative;
+}

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

@@ -0,0 +1,24 @@
+import { notFound } from "next/navigation"
+
+import { env } from "@/env/server"
+
+import styles from "./layout.module.css"
+
+import { LangParams, LayoutArgs } from "@/types/params"
+
+export default function HotelReservationLayout({
+  children,
+  modal,
+}: React.PropsWithChildren<
+  LayoutArgs<LangParams> & { modal: React.ReactNode }
+>) {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return notFound()
+  }
+  return (
+    <div className={styles.layout}>
+      {children}
+      {modal}
+    </div>
+  )
+}

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

@@ -2,5 +2,5 @@
   display: grid;
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: 100dvh;
-  grid-template-columns: 420px 1fr;
+  position: relative;
 }

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

@@ -1,58 +1 @@
-import { env } from "@/env/server"
-
-import {
-  fetchAvailableHotels,
-  getFiltersFromHotels,
-} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
-import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
-import { setLang } from "@/i18n/serverContext"
-
-import styles from "./page.module.css"
-
-import {
-  PointOfInterest,
-  PointOfInterestCategoryNameEnum,
-  PointOfInterestGroupEnum,
-} from "@/types/hotel"
-import { LangParams, PageArgs } from "@/types/params"
-
-export default async function SelectHotelMapPage({
-  params,
-}: PageArgs<LangParams, {}>) {
-  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
-  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
-  setLang(params.lang)
-
-  const hotels = await fetchAvailableHotels({
-    cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
-    roomStayStartDate: "2024-11-02",
-    roomStayEndDate: "2024-11-03",
-    adults: 1,
-  })
-
-  const filters = getFiltersFromHotels(hotels)
-
-  // TODO: this is just a quick transformation to get something there. May need rework
-  const pointOfInterests: PointOfInterest[] = hotels.map((hotel) => ({
-    coordinates: {
-      lat: hotel.hotelData.location.latitude,
-      lng: hotel.hotelData.location.longitude,
-    },
-    name: hotel.hotelData.name,
-    distance: hotel.hotelData.location.distanceToCentre,
-    categoryName: PointOfInterestCategoryNameEnum.HOTEL,
-    group: PointOfInterestGroupEnum.LOCATION,
-  }))
-
-  return (
-    <main className={styles.main}>
-      <SelectHotelMap
-        apiKey={googleMapsApiKey}
-        // TODO: use correct coordinates. The city center?
-        coordinates={{ lat: 59.32, lng: 18.01 }}
-        pointsOfInterest={pointOfInterests}
-        mapId={googleMapId}
-      />
-    </main>
-  )
-}
+export { default } from "../@modal/(.)map/page"

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

@@ -1,6 +1,6 @@
 .main {
   display: flex;
-  gap: var(--Spacing-x4);
+  gap: var(--Spacing-x3);
   padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: 100dvh;
@@ -19,8 +19,28 @@
   padding: var(--Spacing-x2) var(--Spacing-x0);
 }
 
+.mapContainer {
+  display: none;
+}
+
+.buttonContainer {
+  display: flex;
+  gap: var(--Spacing-x2);
+  margin-bottom: var(--Spacing-x3);
+}
+
+.button {
+  flex: 1;
+}
+
 @media (min-width: 768px) {
+  .mapContainer {
+    display: block;
+  }
   .main {
     flex-direction: row;
   }
+  .buttonContainer {
+    display: none;
+  }
 }

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

@@ -9,6 +9,7 @@ import {
 } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
+import MobileMapButtonContainer from "@/components/HotelReservation/SelectHotel/MobileMapButtonContainer"
 import {
   generateChildrenString,
   getHotelReservationQueryParams,
@@ -62,25 +63,28 @@ export default async function SelectHotelPage({
   return (
     <main className={styles.main}>
       <section className={styles.section}>
-        <Link href={selectHotelMap[params.lang]} keepSearchParams>
-          <StaticMap
-            city={searchParams.city}
-            width={340}
-            height={180}
-            zoomLevel={11}
-            mapType="roadmap"
-            altText={`Map of ${searchParams.city} city center`}
-          />
-        </Link>
-        <Link
-          className={styles.link}
-          color="burgundy"
-          href={selectHotelMap[params.lang]}
-          keepSearchParams
-        >
-          {intl.formatMessage({ id: "Show map" })}
-          <ChevronRightIcon color="burgundy" />
-        </Link>
+        <div className={styles.mapContainer}>
+          <Link href={selectHotelMap[params.lang]} keepSearchParams>
+            <StaticMap
+              city={searchParams.city}
+              width={340}
+              height={180}
+              zoomLevel={11}
+              mapType="roadmap"
+              altText={`Map of ${searchParams.city} city center`}
+            />
+          </Link>
+          <Link
+            className={styles.link}
+            color="burgundy"
+            href={selectHotelMap[params.lang]}
+            keepSearchParams
+          >
+            {intl.formatMessage({ id: "Show map" })}
+            <ChevronRightIcon color="burgundy" />
+          </Link>
+        </div>
+        <MobileMapButtonContainer city={searchParams.city} />
         <HotelFilter filters={filterList} />
       </section>
       <HotelCardListing hotelData={hotels} />

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

@@ -3,9 +3,16 @@ import { serverClient } from "@/lib/trpc/server"
 
 import { getLang } from "@/i18n/serverContext"
 
-import { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
-import { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
-import { Filter } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
+import type { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
+import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import type { Filter } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
+import {
+  type PointOfInterest,
+  PointOfInterestCategoryNameEnum,
+  PointOfInterestGroupEnum,
+} from "@/types/hotel"
 
 export async function fetchAvailableHotels(
   input: AvailabilityInput
@@ -42,3 +49,49 @@ export function getFiltersFromHotels(hotels: HotelData[]) {
 
   return filterList
 }
+
+const bedTypeMap: Record<number, string> = {
+  [BedTypeEnum.IN_ADULTS_BED]: "ParentsBed",
+  [BedTypeEnum.IN_CRIB]: "Crib",
+  [BedTypeEnum.IN_EXTRA_BED]: "ExtraBed",
+}
+
+export function generateChildrenString(children: Child[]): string {
+  return `[${children
+    ?.map((child) => {
+      const age = child.age
+      const bedType = bedTypeMap[+child.bed]
+      return `${age}:${bedType}`
+    })
+    .join(",")}]`
+}
+
+export function getPointOfInterests(hotels: HotelData[]): PointOfInterest[] {
+  // TODO: this is just a quick transformation to get something there. May need rework
+  return hotels.map((hotel) => ({
+    coordinates: {
+      lat: hotel.hotelData.location.latitude,
+      lng: hotel.hotelData.location.longitude,
+    },
+    name: hotel.hotelData.name,
+    distance: hotel.hotelData.location.distanceToCentre,
+    categoryName: PointOfInterestCategoryNameEnum.HOTEL,
+    group: PointOfInterestGroupEnum.LOCATION,
+  }))
+}
+
+export function getCentralCoordinates(pointOfInterests: PointOfInterest[]) {
+  const centralCoordinates = pointOfInterests.reduce(
+    (acc, poi) => {
+      acc.lat += poi.coordinates.lat
+      acc.lng += poi.coordinates.lng
+      return acc
+    },
+    { lat: 0, lng: 0 }
+  )
+
+  centralCoordinates.lat /= pointOfInterests.length
+  centralCoordinates.lng /= pointOfInterests.length
+
+  return centralCoordinates
+}