Merge branch 'master' into feature/tracking

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}