Merged master into feat/SW-888-skeleton-loaders

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

@@ -38,6 +38,13 @@
   flex: 1;
 }
 
+.hotelList {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+}
+
 @media (min-width: 768px) {
   .link {
     display: flex;

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

@@ -17,6 +17,7 @@ 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 Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
@@ -24,6 +25,7 @@ import { setLang } from "@/i18n/serverContext"
 import styles from "./page.module.css"
 
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import { AlertTypeEnum } from "@/types/enums/alert"
 import { LangParams, PageArgs } from "@/types/params"
 
 export default async function SelectHotelPage({
@@ -69,12 +71,29 @@ export default async function SelectHotelPage({
       </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`}
+                />
+                <div className={styles.mapLinkText}>
+                  {intl.formatMessage({ id: "Show map" })}
+                  <ChevronRightIcon color="burgundy" width={20} height={20} />
+                </div>
+              </div>
+            </Link>
+          ) : (
             <div className={styles.mapContainer}>
               <StaticMap
                 city={searchParams.city}
@@ -84,16 +103,23 @@ 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>
       </main>
     </>
   )

app/[lang]/(live-current)/layout.tsx

@@ -65,7 +65,6 @@ export default async function RootLayout({
         <SkipToMainContent />
         <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
           {header}
-          <BookingWidget />
           {children}
           <Footer />
           <TokenRefresher />