Merge branch 'master' into feature/tracking

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

@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { env } from "@/env/server"
 import { getLocations } from "@/lib/trpc/memoizedRequests"
 
+import { getHotelPins } from "@/components/HotelReservation/HotelCardDialogListing/utils"
 import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
 import {
   generateChildrenString,
@@ -11,11 +12,7 @@ import {
 import { MapModal } from "@/components/MapModal"
 import { setLang } from "@/i18n/serverContext"
 
-import {
-  fetchAvailableHotels,
-  getCentralCoordinates,
-  getHotelPins,
-} from "../../utils"
+import { fetchAvailableHotels } from "../../utils"
 
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type { LangParams, PageArgs } from "@/types/params"
@@ -61,16 +58,12 @@ export default async function SelectHotelMapPage({
 
   const hotelPins = getHotelPins(hotels)
 
-  const centralCoordinates = getCentralCoordinates(hotelPins)
-
   return (
     <MapModal>
       <SelectHotelMap
         apiKey={googleMapsApiKey}
-        coordinates={centralCoordinates}
         hotelPins={hotelPins}
         mapId={googleMapId}
-        isModal={true}
         hotels={hotels}
       />
     </MapModal>

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

@@ -1,21 +1,23 @@
 .main {
   display: flex;
-  gap: var(--Spacing-x3);
-  padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
+  padding: 0 var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x2);
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: 100dvh;
   flex-direction: column;
   max-width: var(--max-width);
   margin: 0 auto;
 }
-
 .header {
   display: flex;
-  margin: 0 auto;
-  padding: var(--Spacing-x4) var(--Spacing-x5) var(--Spacing-x3)
-    var(--Spacing-x5);
-  justify-content: space-between;
-  max-width: var(--max-width);
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-x2);
+}
+
+.cityInformation {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Spacing-x1);
 }
 
 .sideBar {
@@ -38,7 +40,31 @@
   flex: 1;
 }
 
+.hotelList {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+}
+
 @media (min-width: 768px) {
+  .main {
+    padding: var(--Spacing-x5);
+  }
+  .header {
+    display: block;
+    background-color: var(--Base-Surface-Subtle-Normal);
+    padding: var(--Spacing-x4) var(--Spacing-x5) var(--Spacing-x3)
+      var(--Spacing-x5);
+  }
+
+  .title {
+    margin: 0 auto;
+    display: flex;
+    max-width: var(--max-width-navigation);
+    align-items: center;
+    justify-content: space-between;
+  }
   .link {
     display: flex;
     padding-bottom: var(--Spacing-x6);
@@ -50,13 +76,6 @@
     border-radius: var(--Corner-radius-Medium);
     border: 1px solid var(--Base-Border-Subtle);
   }
-  .mapLinkText {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--Spacing-x-half);
-    padding: var(--Spacing-x-one-and-half) var(--Spacing-x0);
-  }
   .main {
     flex-direction: row;
     gap: var(--Spacing-x5);

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

@@ -19,7 +19,11 @@ import {
 } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
+import Alert from "@/components/TempDesignSystem/Alert"
+import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
+import Preamble from "@/components/TempDesignSystem/Text/Preamble"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
@@ -32,6 +36,7 @@ import {
   TrackingSDKHotelInfo,
   TrackingSDKPageData,
 } from "@/types/components/tracking"
+import { AlertTypeEnum } from "@/types/enums/alert"
 import { LangParams, PageArgs } from "@/types/params"
 
 export default async function SelectHotelPage({
@@ -99,17 +104,44 @@ export default async function SelectHotelPage({
   return (
     <>
       <header className={styles.header}>
-        <div>{city.name}</div>
-        <HotelSorter />
+        <div className={styles.title}>
+          <div className={styles.cityInformation}>
+            <Subtitle>{city.name}</Subtitle>
+            <Preamble>{hotels.length} hotels</Preamble>
+          </div>
+          <HotelSorter />
+        </div>
+        <MobileMapButtonContainer city={searchParams.city} />
       </header>
       <main className={styles.main}>
         <div className={styles.sideBar}>
-          <Link
-            className={styles.link}
-            color="burgundy"
-            href={selectHotelMap[params.lang]}
-            keepSearchParams
-          >
+          {hotels.length > 0 ? ( // TODO: Temp fix until API returns hotels that are not available
+            <Link
+              className={styles.link}
+              color="burgundy"
+              href={selectHotelMap[params.lang]}
+              keepSearchParams
+            >
+              <div className={styles.mapContainer}>
+                <StaticMap
+                  city={searchParams.city}
+                  width={340}
+                  height={180}
+                  zoomLevel={11}
+                  mapType="roadmap"
+                  altText={`Map of ${searchParams.city} city center`}
+                />
+                <Button wrapping size="medium" intent="text" theme="base">
+                  {intl.formatMessage({ id: "See map" })}
+                  <ChevronRightIcon
+                    color="baseButtonTextOnFillNormal"
+                    width={20}
+                    height={20}
+                  />
+                </Button>
+              </div>
+            </Link>
+          ) : (
             <div className={styles.mapContainer}>
               <StaticMap
                 city={searchParams.city}
@@ -119,16 +151,22 @@ export default async function SelectHotelPage({
                 mapType="roadmap"
                 altText={`Map of ${searchParams.city} city center`}
               />
-              <div className={styles.mapLinkText}>
-                {intl.formatMessage({ id: "Show map" })}
-                <ChevronRightIcon color="burgundy" width={20} height={20} />
-              </div>
             </div>
-          </Link>
-          <MobileMapButtonContainer city={searchParams.city} />
+          )}
           <HotelFilter filters={filterList} />
         </div>
-        <HotelCardListing hotelData={hotels} />
+        <div className={styles.hotelList}>
+          {!hotels.length && (
+            <Alert
+              type={AlertTypeEnum.Info}
+              heading={intl.formatMessage({ id: "No availability" })}
+              text={intl.formatMessage({
+                id: "There are no rooms available that match your request.",
+              })}
+            />
+          )}
+          <HotelCardListing hotelData={hotels} />
+        </div>
         <TrackingSDK
           pageData={pageTrackingData}
           hotelInfo={hotelsTrackingData}

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

@@ -87,38 +87,3 @@ export function getFiltersFromHotels(hotels: HotelData[]): CategorizedFilters {
     { facilityFilters: [], surroundingsFilters: [] }
   )
 }
-
-export function getHotelPins(hotels: HotelData[]): HotelPin[] {
-  return hotels.map((hotel) => ({
-    coordinates: {
-      lat: hotel.hotelData.location.latitude,
-      lng: hotel.hotelData.location.longitude,
-    },
-    name: hotel.hotelData.name,
-    publicPrice: hotel.price?.regularAmount ?? null,
-    memberPrice: hotel.price?.memberAmount ?? null,
-    currency: hotel.price?.currency || null,
-    images: [
-      hotel.hotelData.hotelContent.images,
-      ...(hotel.hotelData.gallery?.heroImages ?? []),
-    ],
-    amenities: hotel.hotelData.detailedFacilities.slice(0, 3),
-    ratings: hotel.hotelData.ratings?.tripAdvisor.rating ?? null,
-  }))
-}
-
-export function getCentralCoordinates(hotels: HotelPin[]) {
-  const centralCoordinates = hotels.reduce(
-    (acc, pin) => {
-      acc.lat += pin.coordinates.lat
-      acc.lng += pin.coordinates.lng
-      return acc
-    },
-    { lat: 0, lng: 0 }
-  )
-
-  centralCoordinates.lat /= hotels.length
-  centralCoordinates.lng /= hotels.length
-
-  return centralCoordinates
-}