Merged in feat/SW-629-empty-state-hotel-page (pull request #901)

feat(SW-629): Added no availabilty if no hotels are listed

Approved-by: Niclas Edenvin

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
+          {hotels.length > 0 ? ( // TODO: Temp fix until API returns hotels that are not available
-            className={styles.link}
+            <Link
-            color="burgundy"
+              className={styles.link}
-            href={selectHotelMap[params.lang]}
+              color="burgundy"
-            keepSearchParams
+              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>
     </>
   )

components/HotelReservation/HotelCardListing/index.tsx

@@ -71,19 +71,17 @@ export default function HotelCardListing({
 
   return (
     <section className={styles.hotelCards}>
-      {hotels?.length ? (
+      {hotels?.length
-        hotels.map((hotel) => (
+        ? hotels.map((hotel) => (
-          <HotelCard
+            <HotelCard
-            key={hotel.hotelData.operaId}
+              key={hotel.hotelData.operaId}
-            hotel={hotel}
+              hotel={hotel}
-            type={type}
+              type={type}
-            state={hotel.hotelData.name === activeCard ? "active" : "default"}
+              state={hotel.hotelData.name === activeCard ? "active" : "default"}
-            onHotelCardHover={onHotelCardHover}
+              onHotelCardHover={onHotelCardHover}
-          />
+            />
-        ))
+          ))
-      ) : (
+        : null}
-        <Title>No hotels found</Title>
-      )}
     </section>
   )
 }

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -53,6 +53,10 @@ export default function HotelFilter({ filters }: HotelFiltersProps) {
     return () => subscription.unsubscribe()
   }, [handleSubmit, watch, submitFilter])
 
+  if (!filters.facilityFilters.length && !filters.surroundingsFilters.length) {
+    return null
+  }
+
   return (
     <aside className={styles.container}>
       <FormProvider {...methods}>

i18n/dictionaries/da.json

@@ -213,6 +213,7 @@
   "Next": "Næste",
   "Nights needed to level up": "Nætter nødvendige for at komme i niveau",
   "No": "Nej",
+  "No availability": "Ingen tilgængelighed",
   "No breakfast": "Ingen morgenmad",
   "No content published": "Intet indhold offentliggjort",
   "No matching location found": "Der blev ikke fundet nogen matchende placering",
@@ -335,6 +336,7 @@
   "Thank you": "Tak",
   "Theatre": "Teater",
   "There are no rooms available that match your request": "Der er ingen ledige værelser, der matcher din anmodning",
+  "There are no rooms available that match your request.": "Der er ingen værelser tilgængelige, der matcher din forespørgsel.",
   "There are no transactions to display": "Der er ingen transaktioner at vise",
   "Things nearby HOTEL_NAME": "Ting i nærheden af {hotelName}",
   "To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.": "For at få medlemsprisen <span>{amount} {currency}</span>, log ind eller tilmeld dig, når du udfylder bookingen.",

i18n/dictionaries/de.json

@@ -211,6 +211,7 @@
   "Next": "Nächste",
   "Nights needed to level up": "Nächte, die zum Levelaufstieg benötigt werden",
   "No": "Nein",
+  "No availability": "Keine Verfügbarkeit",
   "No breakfast": "Kein Frühstück",
   "No content published": "Kein Inhalt veröffentlicht",
   "No matching location found": "Kein passender Standort gefunden",
@@ -334,6 +335,7 @@
   "Thank you": "Danke",
   "Theatre": "Theater",
   "There are no rooms available that match your request": "Es sind keine Zimmer verfügbar, die Ihrer Anfrage entsprechen",
+  "There are no rooms available that match your request.": "Es sind keine Zimmer verfügbar, die Ihrer Anfrage entsprechen.",
   "There are no transactions to display": "Es sind keine Transaktionen zum Anzeigen vorhanden",
   "Things nearby HOTEL_NAME": "Dinge in der Nähe von {hotelName}",
   "To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.": "Um den Mitgliederpreis von <span>{amount} {currency}</span> zu erhalten, loggen Sie sich ein oder treten Sie Scandic Friends bei, wenn Sie die Buchung abschließen.",

i18n/dictionaries/en.json

@@ -230,6 +230,7 @@
   "Next": "Next",
   "Nights needed to level up": "Nights needed to level up",
   "No": "No",
+  "No availability": "No availability",
   "No breakfast": "No breakfast",
   "No content published": "No content published",
   "No matching location found": "No matching location found",
@@ -364,6 +365,7 @@
   "Thank you": "Thank you",
   "Theatre": "Theatre",
   "There are no rooms available that match your request": "There are no rooms available that match your request",
+  "There are no rooms available that match your request.": "There are no rooms available that match your request.",
   "There are no transactions to display": "There are no transactions to display",
   "Things nearby HOTEL_NAME": "Things nearby {hotelName}",
   "To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.": "To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.",

i18n/dictionaries/fi.json

@@ -213,6 +213,7 @@
   "Next": "Seuraava",
   "Nights needed to level up": "Yöt, joita tarvitaan tasolle",
   "No": "Ei",
+  "No availability": "Ei saatavuutta",
   "No breakfast": "Ei aamiaista",
   "No content published": "Ei julkaistua sisältöä",
   "No matching location found": "Vastaavaa sijaintia ei löytynyt",
@@ -336,6 +337,7 @@
   "Thank you": "Kiitos",
   "Theatre": "Teatteri",
   "There are no rooms available that match your request": "Pyyntöäsi vastaavia huoneita ei ole saatavilla",
+  "There are no rooms available that match your request.": "Ei huoneita saatavilla, jotka vastaavat pyyntöäsi.",
   "There are no transactions to display": "Näytettäviä tapahtumia ei ole",
   "Things nearby HOTEL_NAME": "Lähellä olevia asioita {hotelName}",
   "To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.": "Jäsenhintaan saavat sisäänkirjautuneet tai liittyneet jäsenet.",

i18n/dictionaries/no.json

@@ -211,6 +211,7 @@
   "Next": "Neste",
   "Nights needed to level up": "Netter som trengs for å komme opp i nivå",
   "No": "Nei",
+  "No availability": "Ingen tilgjengelighet",
   "No breakfast": "Ingen frokost",
   "No content published": "Ingen innhold publisert",
   "No matching location found": "Fant ingen samsvarende plassering",
@@ -333,6 +334,7 @@
   "Thank you": "Takk",
   "Theatre": "Teater",
   "There are no rooms available that match your request": "Det er ingen tilgjengelige rom som samsvarer med forespørselen din",
+  "There are no rooms available that match your request.": "Det er ingen rom tilgjengelige som matcher din forespørsel.",
   "There are no transactions to display": "Det er ingen transaksjoner å vise",
   "Things nearby HOTEL_NAME": "Ting i nærheten av {hotelName}",
   "To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.": "For å få medlemsprisen <span>{amount} {currency}</span>, logg inn eller bli med når du fullfører bestillingen.",

i18n/dictionaries/sv.json

@@ -211,6 +211,7 @@
   "Next": "Nästa",
   "Nights needed to level up": "Nätter som behövs för att gå upp i nivå",
   "No": "Nej",
+  "No availability": "Ingen tillgänglighet",
   "No breakfast": "Ingen frukost",
   "No content published": "Inget innehåll publicerat",
   "No matching location found": "Ingen matchande plats hittades",
@@ -333,6 +334,7 @@
   "Thank you": "Tack",
   "Theatre": "Teater",
   "There are no rooms available that match your request": "Det finns inga tillgängliga rum som matchar din förfrågan",
+  "There are no rooms available that match your request.": "Det finns inga rum tillgängliga som matchar din begäran.",
   "There are no transactions to display": "Det finns inga transaktioner att visa",
   "Things nearby HOTEL_NAME": "Saker i närheten av {hotelName}",
   "To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.": "För att få medlemsprisen <span>{amount} {currency}</span>, logga in eller bli medlem när du slutför bokningen.",