feat(SW-302): switch out mock data for facility cards

components/ContentType/HotelPage/Facilities/CardGrid/cardGrid.module.css

@@ -1,13 +1,13 @@
-.one {
+.spanOne {
   grid-column: span 1;
 }
 
-.two {
+.spanTwo {
   grid-column: span 2;
 }
 
-.three {
+.spanThree {
-  grid-column: 1/-1;
+  grid-column: span 3;
 }
 
 .desktopGrid {
@@ -23,6 +23,8 @@
   .desktopGrid {
     display: grid;
     gap: var(--Spacing-x1);
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-flow: dense;
   }
 
   .mobileGrid {

components/ContentType/HotelPage/Facilities/CardGrid/index.tsx

@@ -9,6 +9,8 @@ import type { CardGridProps } from "@/types/components/hotelPage/facilities"
 
 export default async function CardGrid({ facility }: CardGridProps) {
   const imageCard = sortCards(facility)
+  const nrCards = facility.length
+
   return (
     <section id={imageCard.card?.id}>
       <Grids.Stackable className={styles.desktopGrid}>
@@ -22,7 +24,13 @@ export default async function CardGrid({ facility }: CardGridProps) {
             secondaryButton={card.secondaryButton}
             primaryButton={card.primaryButton}
             backgroundImage={card.backgroundImage}
-            className={styles[card.columnSpan]}
+            className={
+              nrCards == 1
+                ? styles.spanThree
+                : nrCards == 2 && card.backgroundImage
+                  ? styles.spanTwo
+                  : styles.spanOne
+            }
           />
         ))}
       </Grids.Stackable>

components/ContentType/HotelPage/Facilities/mockData.ts

@@ -1,144 +0,0 @@
-import {
-  activities,
-  meetingsAndConferences,
-  restaurantAndBar,
-  wellnessAndExercise,
-} from "@/constants/routes/hotelPageParams"
-
-import { getLang } from "@/i18n/serverContext"
-
-import type { Facilities } from "@/types/components/hotelPage/facilities"
-
-const lang = getLang()
-/* 
-Most of this will be available from the api. Some will need to come from Contentstack. "Activities" will most likely come from Contentstack, which is prepped for.
- */
-export const MOCK_FACILITIES: Facilities = [
-  [
-    {
-      id: "restaurant-and-bar",
-      theme: "primaryDark",
-      scriptedTopTitle: "Restaurant & Bar",
-      heading: "Enjoy relaxed restaurant experience",
-      secondaryButton: {
-        href: `?s=${restaurantAndBar[lang]}`,
-        title: "Read more & book a table",
-        isExternal: false,
-      },
-      columnSpan: "one",
-    },
-    {
-      backgroundImage: {
-        url: "https://imagevault.scandichotels.com/publishedmedia/79xttlmnum0kjbwhyh18/scandic-helsinki-hub-restaurant-food-tuna.jpg",
-        title: "scandic-helsinki-hub-restaurant-food-tuna.jpg",
-        meta: {
-          alt: "food in restaurant at scandic helsinki hub",
-          caption: "food in restaurant at scandic helsinki hub",
-        },
-        id: 81751,
-        dimensions: {
-          width: 5935,
-          height: 3957,
-          aspectRatio: 1.499873641647713,
-        },
-      },
-      columnSpan: "one",
-    },
-    {
-      backgroundImage: {
-        url: "https://imagevault.scandichotels.com/publishedmedia/48sb3eyhhzj727l2j1af/Scandic-helsinki-hub-II-centro-41.jpg",
-        meta: {
-          alt: "restaurant il centro at scandic helsinki hu",
-          caption: "restaurant il centro at scandic helsinki hub",
-        },
-        id: 82457,
-        title: "Scandic-helsinki-hub-II-centro-41.jpg",
-        dimensions: {
-          width: 4200,
-          height: 2800,
-          aspectRatio: 1.5,
-        },
-      },
-      columnSpan: "one",
-    },
-  ],
-  [
-    {
-      backgroundImage: {
-        url: "https://imagevault.scandichotels.com/publishedmedia/csef06n329hjfiet1avj/Scandic-spectrum-8.jpg",
-        meta: {
-          alt: "man with a laptop",
-          caption: "man with a laptop",
-        },
-        id: 82713,
-        title: "Scandic-spectrum-8.jpg",
-        dimensions: {
-          width: 7499,
-          height: 4999,
-          aspectRatio: 1.500100020004001,
-        },
-      },
-      columnSpan: "two",
-    },
-    {
-      id: "meetings-and-conferences",
-      theme: "primaryDim",
-      scriptedTopTitle: "Meetings & Conferences",
-      heading: "Events that make an impression",
-      secondaryButton: {
-        href: `?s=${meetingsAndConferences[lang]}`,
-        title: "About meetings & conferences",
-        isExternal: false,
-      },
-      columnSpan: "one",
-    },
-  ],
-  [
-    {
-      id: "wellness-and-exercise",
-      theme: "one",
-      scriptedTopTitle: "Wellness & Exercise",
-      heading: "Sauna and gym",
-      secondaryButton: {
-        href: `?s=${wellnessAndExercise[lang]}`,
-        title: "Read more about wellness & exercise",
-        isExternal: false,
-      },
-      columnSpan: "one",
-    },
-    {
-      backgroundImage: {
-        url: "https://imagevault.scandichotels.com/publishedmedia/69acct5i3pk5be7d6ub0/scandic-helsinki-hub-sauna.jpg",
-        meta: {
-          alt: "sauna at scandic helsinki hub",
-          caption: "sauna at scandic helsinki hub",
-        },
-        id: 81814,
-        title: "scandic-helsinki-hub-sauna.jpg",
-        dimensions: {
-          width: 4000,
-          height: 2667,
-          aspectRatio: 1.4998125234345707,
-        },
-      },
-      columnSpan: "one",
-    },
-    {
-      backgroundImage: {
-        url: "https://imagevault.scandichotels.com/publishedmedia/eu70o6z85idy24r92ysf/Scandic-Helsinki-Hub-gym-22.jpg",
-        meta: {
-          alt: "Gym at hotel Scandic Helsinki Hub",
-          caption: "Gym at hotel Scandic Helsinki Hub",
-        },
-        id: 81867,
-        title: "Scandic-Helsinki-Hub-gym-22.jpg",
-        dimensions: {
-          width: 4000,
-          height: 2667,
-          aspectRatio: 1.4998125234345707,
-        },
-      },
-      columnSpan: "one",
-    },
-  ],
-]

components/ContentType/HotelPage/Rooms/RoomCard/index.tsx

@@ -10,7 +10,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./roomCard.module.css"
 
-import { RoomCardProps } from "@/types/components/hotelPage/roomCard"
+import type { RoomCardProps } from "@/types/components/hotelPage/roomCard"
 
 export function RoomCard({
   badgeTextTransKey,

components/ContentType/HotelPage/Rooms/index.tsx

@@ -10,10 +10,11 @@ import Button from "@/components/TempDesignSystem/Button"
 import Grids from "@/components/TempDesignSystem/Grids"
 
 import { RoomCard } from "./RoomCard"
-import { RoomsProps } from "./types"
 
 import styles from "./rooms.module.css"
 
+import type { RoomsProps } from "./types"
+
 export function Rooms({ rooms }: RoomsProps) {
   const intl = useIntl()
   const [allRoomsVisible, setAllRoomsVisible] = useState(false)

components/ContentType/HotelPage/index.tsx

@@ -7,8 +7,7 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
-import { MOCK_FACILITIES } from "./Facilities/mockData"
+import { setActivityCard, setFacilityCards } from "@/utils/facilityCards"
-import { setActivityCard } from "./Facilities/utils"
 import DynamicMap from "./Map/DynamicMap"
 import MapCard from "./Map/MapCard"
 import MobileMapToggle from "./Map/MobileMapToggle"
@@ -45,9 +44,10 @@ export default async function HotelPage() {
     roomCategories,
     activitiesCard,
     pointsOfInterest,
+    facilityCards,
   } = hotelData
 
-  const facilities = [...MOCK_FACILITIES]
+  const facilities = await setFacilityCards(facilityCards)
   activitiesCard && facilities.push(setActivityCard(activitiesCard))
   const topThreePois = pointsOfInterest.slice(0, 3)
 

components/TempDesignSystem/Card/CardImage/index.tsx

@@ -18,7 +18,7 @@ export default function CardImage({
           ({ backgroundImage }) =>
             backgroundImage && (
               <Image
-                key={backgroundImage.id}
+                key={backgroundImage.title}
                 src={backgroundImage.url}
                 className={styles.image}
                 alt={backgroundImage.title}

components/TempDesignSystem/Card/card.ts

@@ -2,6 +2,7 @@ import { cardVariants } from "./variants"
 
 import type { VariantProps } from "class-variance-authority"
 
+import type { ApiImage } from "@/types/components/image"
 import type { ImageVaultAsset } from "@/types/components/imageVault"
 
 export interface CardProps
@@ -22,9 +23,9 @@ export interface CardProps
   scriptedTopTitle?: string | null
   heading?: string | null
   bodyText?: string | null
-  backgroundImage?: ImageVaultAsset
   imageHeight?: number
   imageWidth?: number
   onPrimaryButtonClick?: () => void
   onSecondaryButtonClick?: () => void
+  backgroundImage?: ImageVaultAsset | ApiImage
 }

i18n/dictionaries/da.json

@@ -1,6 +1,7 @@
 {
   "A destination or hotel name is needed to be able to search for a hotel room.": "Et destinations- eller hotelnavn er nødvendigt for at kunne søge efter et hotelværelse.",
   "A photo of the room": "Et foto af værelset",
+  "About meetings & conferences": "About meetings & conferences",
   "Activities": "Aktiviteter",
   "Add code": "Tilføj kode",
   "Add new card": "Tilføj nyt kort",
@@ -21,6 +22,8 @@
   "At the hotel": "På hotellet",
   "Attractions": "Attraktioner",
   "Back to scandichotels.com": "Tilbage til scandichotels.com",
+  "Bar": "Bar",
+  "Bars": "Bars",
   "Bed type": "Seng type",
   "Book": "Book",
   "Book reward night": "Book bonusnat",
@@ -30,6 +33,7 @@
   "Breakfast included": "Morgenmad inkluderet",
   "Bus terminal": "Busstation",
   "Business": "Forretning",
+  "Breakfast restaurant": "Breakfast restaurant",
   "Cancel": "Afbestille",
   "Check in": "Check ind",
   "Check out": "Check ud",
@@ -72,6 +76,8 @@
   "Edit profile": "Rediger profil",
   "Email": "E-mail",
   "Enter destination or hotel": "Indtast destination eller hotel",
+  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
+  "Events that make an impression": "Events that make an impression",
   "Explore all levels and benefits": "Udforsk alle niveauer og fordele",
   "Explore nearby": "Udforsk i nærheden",
   "Extras to your booking": "Tillæg til din booking",
@@ -182,14 +188,20 @@
   "Public price from": "Offentlig pris fra",
   "Public transport": "Offentlig transport",
   "Read more": "Læs mere",
+  "Read more & book a table": "Read more & book a table",
   "Read more about the hotel": "Læs mere om hotellet",
+  "Read more about wellness & exercise": "Read more about wellness & exercise",
   "Remove card from member profile": "Fjern kortet fra medlemsprofilen",
   "Restaurant": "Restaurant",
   "Restaurant & Bar": "Restaurant & Bar",
+  "Restaurants": "Restaurants",
+  "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Gentag den nye adgangskode",
   "Room & Terms": "Værelse & Vilkår",
   "Room facilities": "Værelsesfaciliteter",
   "Rooms": "Værelser",
+  "Rooms & Guests": "Værelser & gæster",
+  "Sauna and gym": "Sauna and gym",
   "Save": "Gemme",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",

i18n/dictionaries/de.json

@@ -2,6 +2,7 @@
   "A destination or hotel name is needed to be able to search for a hotel room.": "Ein Reiseziel oder Hotelname wird benötigt, um nach einem Hotelzimmer suchen zu können.",
   "A photo of the room": "Ein Foto des Zimmers",
   "Activities": "Aktivitäten",
+  "About meetings & conferences": "About meetings & conferences",
   "Add code": "Code hinzufügen",
   "Add new card": "Neue Karte hinzufügen",
   "Address": "Adresse",
@@ -22,6 +23,8 @@
   "At the hotel": "Im Hotel",
   "Attractions": "Attraktionen",
   "Back to scandichotels.com": "Zurück zu scandichotels.com",
+  "Bar": "Bar",
+  "Bars": "Bars",
   "Bed type": "Bettentyp",
   "Book": "Buchen",
   "Book reward night": "Bonusnacht buchen",
@@ -33,6 +36,7 @@
   "Bus terminal": "Busbahnhof",
   "Business": "Geschäft",
   "by": "bis",
+  "Breakfast restaurant": "Breakfast restaurant",
   "Cancel": "Stornieren",
   "characters": "figuren",
   "Check in": "Einchecken",
@@ -75,6 +79,8 @@
   "Edit profile": "Profil bearbeiten",
   "Email": "Email",
   "Enter destination or hotel": "Reiseziel oder Hotel eingeben",
+  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
+  "Events that make an impression": "Events that make an impression",
   "Explore all levels and benefits": "Entdecken Sie alle Levels und Vorteile",
   "Explore nearby": "Erkunden Sie die Umgebung",
   "Extras to your booking": "Extras zu Ihrer Buchung",
@@ -192,14 +198,20 @@
   "Public price from": "Öffentlicher Preis ab",
   "Public transport": "Öffentliche Verkehrsmittel",
   "Read more": "Mehr lesen",
+  "Read more & book a table": "Read more & book a table",
   "Read more about the hotel": "Lesen Sie mehr über das Hotel",
+  "Read more about wellness & exercise": "Read more about wellness & exercise",
   "Remove card from member profile": "Karte aus dem Mitgliedsprofil entfernen",
   "Restaurant": "Restaurant",
   "Restaurant & Bar": "Restaurant & Bar",
+  "Restaurants": "Restaurants",
+  "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Neues Passwort erneut eingeben",
   "Room & Terms": "Zimmer & Bedingungen",
   "Room facilities": "Zimmerausstattung",
   "Rooms": "Räume",
+  "Rooms & Guests": "Zimmer & Gäste",
+  "Sauna and gym": "Sauna and gym",
   "Save": "Speichern",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",

i18n/dictionaries/en.json

@@ -1,6 +1,7 @@
 {
   "A destination or hotel name is needed to be able to search for a hotel room.": "A destination or hotel name is needed to be able to search for a hotel room.",
   "A photo of the room": "A photo of the room",
+  "About meetings & conferences": "About meetings & conferences",
   "Activities": "Activities",
   "Add code": "Add code",
   "Add new card": "Add new card",
@@ -21,6 +22,8 @@
   "At the hotel": "At the hotel",
   "Attractions": "Attractions",
   "Back to scandichotels.com": "Back to scandichotels.com",
+  "Bar": "Bar",
+  "Bars": "Bars",
   "Bed type": "Bed type",
   "Book": "Book",
   "Book reward night": "Book reward night",
@@ -30,6 +33,7 @@
   "Breakfast included": "Breakfast included",
   "Bus terminal": "Bus terminal",
   "Business": "Business",
+  "Breakfast restaurant": "Breakfast restaurant",
   "Cancel": "Cancel",
   "Check in": "Check in",
   "Check out": "Check out",
@@ -74,6 +78,8 @@
   "Email": "Email",
   "Email address": "Email address",
   "Enter destination or hotel": "Enter destination or hotel",
+  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
+  "Events that make an impression": "Events that make an impression",
   "Explore all levels and benefits": "Explore all levels and benefits",
   "Explore nearby": "Explore nearby",
   "Extras to your booking": "Extras to your booking",
@@ -188,14 +194,20 @@
   "Public price from": "Public price from",
   "Public transport": "Public transport",
   "Read more": "Read more",
+  "Read more & book a table": "Read more & book a table",
   "Read more about the hotel": "Read more about the hotel",
+  "Read more about wellness & exercise": "Read more about wellness & exercise",
   "Remove card from member profile": "Remove card from member profile",
   "Restaurant": "Restaurant",
   "Restaurant & Bar": "Restaurant & Bar",
+  "Restaurants": "Restaurants",
+  "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Retype new password",
   "Room & Terms": "Room & Terms",
   "Room facilities": "Room facilities",
   "Rooms": "Rooms",
+  "Rooms & Guests": "Rooms & Guests",
+  "Sauna and gym": "Sauna and gym",
   "Save": "Save",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
@@ -275,7 +287,6 @@
   "Zip code": "Zip code",
   "Zoo": "Zoo",
   "Zoom in": "Zoom in",
-  "Zoom out": "Zoom out",
   "as of today": "as of today",
   "booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}",
   "booking.nights": "{totalNights, plural, one {# night} other {# nights}}",
@@ -296,5 +307,6 @@
   "spendable points expiring by": "{points} spendable points expiring by {date}",
   "to": "to",
   "uppercase letter": "uppercase letter",
-  "{difference}{amount} {currency}": "{difference}{amount} {currency}"
+  "{difference}{amount} {currency}": "{difference}{amount} {currency}",
+  "Zoom out": "Zoom out"
 }

i18n/dictionaries/fi.json

@@ -1,6 +1,7 @@
 {
   "A destination or hotel name is needed to be able to search for a hotel room.": "Kohteen tai hotellin nimi tarvitaan, jotta hotellihuonetta voidaan hakea.",
   "A photo of the room": "Kuva huoneesta",
+  "About meetings & conferences": "About meetings & conferences",
   "Activities": "Aktiviteetit",
   "Add code": "Lisää koodi",
   "Add new card": "Lisää uusi kortti",
@@ -21,6 +22,8 @@
   "At the hotel": "Hotellissa",
   "Attractions": "Nähtävyydet",
   "Back to scandichotels.com": "Takaisin scandichotels.com",
+  "Bar": "Bar",
+  "Bars": "Bars",
   "Bed type": "Vuodetyyppi",
   "Book": "Varaa",
   "Book reward night": "Kirjapalkinto-ilta",
@@ -30,6 +33,7 @@
   "Breakfast included": "Aamiainen sisältyy",
   "Bus terminal": "Bussiasema",
   "Business": "Business",
+  "Breakfast restaurant": "Breakfast restaurant",
   "Cancel": "Peruuttaa",
   "Check in": "Sisäänkirjautuminen",
   "Check out": "Uloskirjautuminen",
@@ -72,6 +76,8 @@
   "Edit profile": "Muokkaa profiilia",
   "Email": "Sähköposti",
   "Enter destination or hotel": "Anna kohde tai hotelli",
+  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
+  "Events that make an impression": "Events that make an impression",
   "Explore all levels and benefits": "Tutustu kaikkiin tasoihin ja etuihin",
   "Explore nearby": "Tutustu lähialueeseen",
   "Extras to your booking": "Varauksessa lisäpalveluita",
@@ -182,14 +188,21 @@
   "Public price from": "Julkinen hinta alkaen",
   "Public transport": "Julkinen liikenne",
   "Read more": "Lue lisää",
+  "Read more & book a table": "Read more & book a table",
   "Read more about the hotel": "Lue lisää hotellista",
+  "Read more about wellness & exercise": "Read more about wellness & exercise",
   "Remove card from member profile": "Poista kortti jäsenprofiilista",
   "Restaurant": "Ravintola",
   "Restaurant & Bar": "Ravintola & Baari",
+  "Restaurants": "Restaurants",
+  "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Kirjoita uusi salasana uudelleen",
   "Room & Terms": "Huone & Ehdot",
   "Room facilities": "Huoneen varustelu",
   "Rooms": "Huoneet",
+  "Rooms & Guests": "Huoneet & Vieraat",
+  "Rooms & Guestss": "Huoneet & Vieraat",
+  "Sauna and gym": "Sauna and gym",
   "Save": "Tallenna",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",

i18n/dictionaries/no.json

@@ -1,6 +1,7 @@
 {
   "A destination or hotel name is needed to be able to search for a hotel room.": "Et reisemål eller hotellnavn er nødvendig for å kunne søke etter et hotellrom.",
   "A photo of the room": "Et bilde av rommet",
+  "About meetings & conferences": "About meetings & conferences",
   "Activities": "Aktiviteter",
   "Add code": "Legg til kode",
   "Add new card": "Legg til nytt kort",
@@ -21,6 +22,8 @@
   "At the hotel": "På hotellet",
   "Attractions": "Attraksjoner",
   "Back to scandichotels.com": "Tilbake til scandichotels.com",
+  "Bar": "Bar",
+  "Bars": "Bars",
   "Bed type": "Seng type",
   "Book": "Bestill",
   "Book reward night": "Bestill belønningskveld",
@@ -72,6 +75,8 @@
   "Edit profile": "Rediger profil",
   "Email": "E-post",
   "Enter destination or hotel": "Skriv inn destinasjon eller hotell",
+  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
+  "Events that make an impression": "Events that make an impression",
   "Explore all levels and benefits": "Utforsk alle nivåer og fordeler",
   "Explore nearby": "Utforsk i nærheten",
   "Extras to your booking": "Tilvalg til bestillingen din",
@@ -182,14 +187,20 @@
   "Public price from": "Offentlig pris fra",
   "Public transport": "Offentlig transport",
   "Read more": "Les mer",
+  "Read more & book a table": "Read more & book a table",
   "Read more about the hotel": "Les mer om hotellet",
+  "Read more about wellness & exercise": "Read more about wellness & exercise",
   "Remove card from member profile": "Fjern kortet fra medlemsprofilen",
   "Restaurant": "Restaurant",
   "Restaurant & Bar": "Restaurant & Bar",
+  "Restaurants": "Restaurants",
+  "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Skriv inn nytt passord på nytt",
   "Room & Terms": "Rom & Vilkår",
   "Room facilities": "Romfasiliteter",
   "Rooms": "Rom",
+  "Rooms & Guests": "Rom og gjester",
+  "Sauna and gym": "Sauna and gym",
   "Save": "Lagre",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",

i18n/dictionaries/sv.json

@@ -1,6 +1,7 @@
 {
   "A destination or hotel name is needed to be able to search for a hotel room.": "Ett destinations- eller hotellnamn behövs för att kunna söka efter ett hotellrum.",
   "A photo of the room": "Ett foto av rummet",
+  "About meetings & conferences": "About meetings & conferences",
   "Activities": "Aktiviteter",
   "Add code": "Lägg till kod",
   "Add new card": "Lägg till nytt kort",
@@ -21,6 +22,8 @@
   "At the hotel": "På hotellet",
   "Attractions": "Sevärdheter",
   "Back to scandichotels.com": "Tillbaka till scandichotels.com",
+  "Bar": "Bar",
+  "Bars": "Bars",
   "Bed type": "Sängtyp",
   "Book": "Boka",
   "Book reward night": "Boka frinatt",
@@ -30,6 +33,7 @@
   "Breakfast included": "Frukost ingår",
   "Bus terminal": "Bussterminal",
   "Business": "Business",
+  "Breakfast restaurant": "Breakfast restaurant",
   "Cancel": "Avbryt",
   "Check in": "Checka in",
   "Check out": "Checka ut",
@@ -72,6 +76,8 @@
   "Edit profile": "Redigera profil",
   "Email": "E-post",
   "Enter destination or hotel": "Ange destination eller hotell",
+  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
+  "Events that make an impression": "Events that make an impression",
   "Explore all levels and benefits": "Utforska alla nivåer och fördelar",
   "Explore nearby": "Utforska i närheten",
   "Extras to your booking": "Extra tillval till din bokning",
@@ -183,14 +189,20 @@
   "Public price from": "Offentligt pris från",
   "Public transport": "Kollektivtrafik",
   "Read more": "Läs mer",
+  "Read more & book a table": "Read more & book a table",
   "Read more about the hotel": "Läs mer om hotellet",
+  "Read more about wellness & exercise": "Read more about wellness & exercise",
   "Remove card from member profile": "Ta bort kortet från medlemsprofilen",
   "Restaurant": "Restaurang",
   "Restaurant & Bar": "Restaurang & Bar",
+  "Restaurants": "Restaurants",
+  "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Upprepa nytt lösenord",
   "Room & Terms": "Rum & Villkor",
   "Room facilities": "Rumfaciliteter",
   "Rooms": "Rum",
+  "Rooms & Guests": "Rum och gäster",
+  "Sauna and gym": "Sauna and gym",
   "Save": "Spara",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",

server/routers/hotels/output.ts

@@ -164,6 +164,16 @@ const detailedFacilitySchema = z.object({
   filter: z.string().optional(),
 })
 
+const facilitySchema = z.object({
+  headingText: z.string().optional(), // TODO: Should not be optional, remove when we get meetingsAndConferences headingText
+  heroImages: z.array(
+    z.object({
+      metaData: imageMetaDataSchema,
+      imageSizes: imageSizesSchema,
+    })
+  ),
+})
+
 const healthFacilitySchema = z.object({
   type: z.string(),
   content: z.object({
@@ -497,6 +507,9 @@ export const getHotelDataSchema = z.object({
       socialMedia: socialMediaSchema,
       meta: metaSchema.optional(),
       isActive: z.boolean(),
+      conferencesAndMeetings: facilitySchema.optional(),
+      healthAndWellness: facilitySchema.optional(),
+      restaurantImages: facilitySchema.optional(),
     }),
     relationships: relationshipsSchema,
   }),
@@ -778,3 +791,4 @@ export const apiLocationsSchema = z.object({
         })
     ),
 })
+export type Facility = z.infer<typeof facilitySchema> & { id: string }

server/routers/hotels/query.ts

@@ -26,6 +26,7 @@ import {
   getRatesInputSchema,
 } from "./input"
 import {
+  Facility,
   getAvailabilitySchema,
   getHotelDataSchema,
   getRatesSchema,
@@ -40,6 +41,7 @@ import {
   TWENTYFOUR_HOURS,
 } from "./utils"
 
+import { facilityEnum } from "@/types/components/hotelPage/facilities"
 import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
 import type { RequestOptionsWithOutBody } from "@/types/fetch"
 import type { GetHotelPageData } from "@/types/trpc/routers/contentstack/hotelPage"
@@ -173,7 +175,6 @@ export const hotelQueryRouter = router({
       const included = validatedHotelData.data.included || []
 
       const hotelAttributes = validatedHotelData.data.data.attributes
-
       const images = extractHotelImages(hotelAttributes)
 
       const roomCategories = included
@@ -212,6 +213,21 @@ export const hotelQueryRouter = router({
         ? contentstackData?.content[0]
         : null
 
+      const facilities: Array<Facility> = [
+        {
+          ...apiJson.data.attributes.restaurantImages,
+          id: facilityEnum.restaurant,
+        },
+        {
+          ...apiJson.data.attributes.conferencesAndMeetings,
+          id: facilityEnum.conference,
+        },
+        {
+          ...apiJson.data.attributes.healthAndWellness,
+          id: facilityEnum.wellness,
+        },
+      ]
+
       getHotelSuccessCounter.add(1, { hotelId, lang, include })
       console.info(
         "api.hotels.hotel success",
@@ -229,7 +245,8 @@ export const hotelQueryRouter = router({
         hotelImages: images,
         pointsOfInterest: hotelAttributes.pointsOfInterest,
         roomCategories,
-        activitiesCard: activities?.upcoming_activities_card,
+        activitiesCard: activities,
+        facilityCards: facilities,
       }
     }),
   availability: router({

types/components/cardImage.ts

@@ -1,7 +1,6 @@
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
-import type { FacilityCard } from "./hotelPage/facilities"
 
 export interface CardImageProps extends React.HTMLAttributes<HTMLDivElement> {
-  card: FacilityCard | undefined
+  card: CardProps | undefined
   imageCards: Pick<CardProps, "backgroundImage">[]
 }

types/components/hotelPage/facilities.ts

@@ -1,12 +1,6 @@
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
-interface ColumnSpanOptions {
+export type Facility = Array<CardProps>
-  columnSpan: "one" | "two" | "three"
-}
-
-export type FacilityCard = CardProps & ColumnSpanOptions
-
-export type Facility = Array<FacilityCard>
 
 export type Facilities = Array<Facility>
 
@@ -17,3 +11,9 @@ export type FacilityProps = {
 export type CardGridProps = {
   facility: Facility
 }
+
+export enum facilityEnum {
+  wellness = "wellness-and-exercise",
+  conference = "meetings-and-conferences",
+  restaurant = "restaurant-and-bar",
+}

types/components/image.ts

@@ -0,0 +1,8 @@
+export type ApiImage = {
+  url: string
+  title: string
+  meta: {
+    alt: string
+    caption: string
+  }
+}

utils/facilityCards.ts

@@ -0,0 +1,139 @@
+import {
+  meetingsAndConferences,
+  restaurantAndBar,
+  wellnessAndExercise,
+} from "@/constants/routes/hotelPageParams"
+
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import {
+  type Facilities,
+  type Facility as f,
+  facilityEnum,
+} from "@/types/components/hotelPage/facilities"
+import type { ImageVaultAsset } from "@/types/components/imageVault"
+import type { CardProps } from "@/components/TempDesignSystem/Card/card"
+import type { Facility } from "@/server/routers/hotels/output"
+
+type ActivityCard = {
+  background_image?: ImageVaultAsset
+  scripted_title?: string
+  heading: string
+  body_text: string
+  cta_text: string
+  contentPage: Array<{ href: string }>
+}
+
+export function setActivityCard(activitiesCard: ActivityCard): f {
+  const hasImage = activitiesCard.background_image
+  return [
+    {
+      id: "activities",
+      theme: hasImage ? "image" : "primaryDark",
+      scriptedTopTitle: activitiesCard.scripted_title,
+      heading: activitiesCard.heading,
+      bodyText: activitiesCard.body_text,
+      backgroundImage: hasImage ? activitiesCard.background_image : undefined,
+      primaryButton: hasImage
+        ? {
+            href: activitiesCard.contentPage[0].href,
+            title: activitiesCard.cta_text,
+            isExternal: false,
+          }
+        : undefined,
+      secondaryButton: hasImage
+        ? undefined
+        : {
+            href: activitiesCard.contentPage[0].href,
+            title: activitiesCard.cta_text,
+            isExternal: false,
+          },
+    },
+  ]
+}
+
+export async function setFacilityCards(facilities: Array<Facility>) {
+  const lang = getLang()
+  const intl = await getIntl()
+
+  let cards: Facilities = [],
+    card: CardProps,
+    grid: Array<CardProps>
+
+  facilities.map((facility) => {
+    card = {}
+    grid = []
+
+    card.scriptedTopTitle = facility.headingText
+
+    facility.heroImages.map((image) => {
+      card = {}
+      ;(card.backgroundImage = {
+        url: image.imageSizes.large,
+        title: image.metaData.title,
+        meta: {
+          alt: image.metaData.altText,
+          caption: image.metaData.altText_En,
+        },
+      }),
+        (card.theme = "image")
+      grid.push(card)
+    })
+    card = {}
+
+    switch (facility.id) {
+      case facilityEnum.wellness:
+        card.theme = "one"
+        card.id = "wellness-and-exercise"
+        ;(card.heading = intl.formatMessage({ id: "Sauna and gym" })),
+          (card.secondaryButton = {
+            href: `?s=${wellnessAndExercise[lang]}`,
+            title: intl.formatMessage({
+              id: "Read more about wellness & exercise",
+            }),
+            isExternal: false,
+          })
+        grid.unshift(card)
+        break
+
+      case facilityEnum.conference:
+        card.theme = "primaryDim"
+        card.id = "meetings-and-conferences"
+        ;(card.heading = intl.formatMessage({
+          id: "Events that make an impression",
+        })),
+          (card.secondaryButton = {
+            href: `?s=${meetingsAndConferences[lang]}`,
+            title: intl.formatMessage({ id: "About meetings & conferences" }),
+            isExternal: false,
+          })
+        grid.push(card)
+        break
+
+      case facilityEnum.restaurant:
+        card.theme = "primaryDark"
+        card.id = "restaurant-and-bar"
+        card.heading = intl.formatMessage({
+          id: "Enjoy relaxed restaurant experiences",
+        })
+        card.secondaryButton = {
+          href: `?s=${restaurantAndBar[lang]}`,
+          title: intl.formatMessage({ id: "Read more & book a table" }),
+          isExternal: false,
+        }
+        grid.unshift(card)
+        break
+    }
+    cards.push(grid)
+  })
+  return cards
+}
+
+/* lista över potentiella 
+  Restaurant & Bar
+  Restaurants & bars
+  Restaurant
+  Bar
+  Breakfast restaurant (fallback om det inte finns restaurang eller bar)
+*/

utils/imageCard.ts

@@ -1,10 +1,8 @@
-import type {
+import type { Facility } from "@/types/components/hotelPage/facilities"
-  Facility,
+import type { CardProps } from "@/components/TempDesignSystem/Card/card"
-  FacilityCard,
-} from "@/types/components/hotelPage/facilities"
 
 export function sortCards(grid: Facility) {
-  const sortedCards = grid.slice(0).sort((a: FacilityCard, b: FacilityCard) => {
+  const sortedCards = grid.slice(0).sort((a: CardProps, b: CardProps) => {
     if (!a.backgroundImage && b.backgroundImage) {
       return 1
     }