Merge branch 'master' into feature/tracking

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

@@ -3,7 +3,7 @@ import { notFound } from "next/navigation"
 
 import { Lang } from "@/constants/languages"
 import { env } from "@/env/server"
-import { getLocations } from "@/lib/trpc/memoizedRequests"
+import { getCityCoordinates, getLocations } from "@/lib/trpc/memoizedRequests"
 
 import { getHotelPins } from "@/components/HotelReservation/HotelCardDialogListing/utils"
 import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
@@ -93,6 +93,7 @@ export default async function SelectHotelMapPage({
 
   const hotelPins = getHotelPins(hotels)
   const filterList = getFiltersFromHotels(hotels)
+  const cityCoordinates = await getCityCoordinates({ city: city.name })
 
   return (
     <MapModal>
@@ -102,6 +103,7 @@ export default async function SelectHotelMapPage({
         mapId={googleMapId}
         hotels={hotels}
         filterList={filterList}
+        cityCoordinates={cityCoordinates}
       />
       <TrackingSDK pageData={pageTrackingData} hotelInfo={hotelsTrackingData} />
     </MapModal>

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

@@ -14,6 +14,10 @@
   padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-x2);
 }
 
+.header nav {
+  display: none;
+}
+
 .cityInformation {
   display: flex;
   flex-wrap: wrap;
@@ -65,13 +69,19 @@
       var(--Spacing-x5);
   }
 
+  .header nav {
+    display: block;
+    max-width: var(--max-width-navigation);
+    padding-left: 0;
+  }
+
   .sorter {
     display: block;
     width: 339px;
   }
 
   .title {
-    margin: 0 auto;
+    margin: var(--Spacing-x3) auto 0;
     display: flex;
     max-width: var(--max-width-navigation);
     align-items: center;

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

@@ -1,8 +1,12 @@
 import { differenceInCalendarDays, format, isWeekend } from "date-fns"
 import { notFound } from "next/navigation"
+import { Suspense } from "react"
 
 import { Lang } from "@/constants/languages"
-import { selectHotelMap } from "@/constants/routes/hotelReservation"
+import {
+  selectHotel,
+  selectHotelMap,
+} from "@/constants/routes/hotelReservation"
 import { getLocations } from "@/lib/trpc/memoizedRequests"
 
 import {
@@ -21,6 +25,8 @@ import {
 import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Alert from "@/components/TempDesignSystem/Alert"
+import Breadcrumbs from "@/components/TempDesignSystem/Breadcrumbs"
+import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -75,6 +81,27 @@ export default async function SelectHotelPage({
   const departureDate = new Date(searchParams.toDate)
 
   const filterList = getFiltersFromHotels(hotels)
+  const breadcrumbs = [
+    {
+      title: intl.formatMessage({ id: "Home" }),
+      href: `/${params.lang}`,
+      uid: "home-page",
+    },
+    {
+      title: intl.formatMessage({ id: "Hotel reservation" }),
+      href: `/${params.lang}/hotelreservation`,
+      uid: "hotel-reservation",
+    },
+    {
+      title: intl.formatMessage({ id: "Select hotel" }),
+      href: `${selectHotel(params.lang)}/?${selectHotelParams}`,
+      uid: "select-hotel",
+    },
+    {
+      title: city.name,
+      uid: city.id,
+    },
+  ]
 
   const isAllUnavailable = hotels.every((hotel) => hotel.price === undefined)
 
@@ -106,6 +133,9 @@ export default async function SelectHotelPage({
   return (
     <>
       <header className={styles.header}>
+        <Suspense fallback={<BreadcrumbsSkeleton />}>
+          <Breadcrumbs breadcrumbs={breadcrumbs} />
+        </Suspense>
         <div className={styles.title}>
           <div className={styles.cityInformation}>
             <Subtitle>{city.name}</Subtitle>